<script>
import {defineComponent} from 'vue'
import WangEditor from "../../components/WangEditor.vue";

export default defineComponent({
  name: "points_rules",
  components: {WangEditor},
  data() {
    return {
      editorContent: '<p>初始内容</p>',
      editorConfig: {
        // 自定义上传图片接口
        uploadImgServer: '/api/upload/image',
        uploadFileName: 'file',

        // 自定义工具栏
        toolbarKeys: [
          'head', 'bold', 'italic', 'underline', 'strikeThrough',
          'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
          'emoticon', 'image', 'table'
        ]
      }
    }
  },
  methods:{
    handleEditorReady(editor) {
      console.log('编辑器就绪:', editor);
      // 可在此处调用编辑器API，如设置字体大小
      // editor.cmd.do('fontSize', 5);
    }
  }
})
</script>

<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/operation/points'}">积分设置</el-breadcrumb-item>
        <el-breadcrumb-item>积分规则设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="margin: 2% 0 2% 1%;">
      <span style="display: flex">积分获取：<div style="width: 50%;background-color: #9d9d9d;">
        <div style="margin-left: 2.5%;padding: 2% 0 2% 0">
          <el-checkbox v-model="checked">注册获得积分<el-input size="small" placeholder="请输入"/></el-checkbox>
          <el-checkbox v-model="checked">每日签到，获得积分<el-input size="small" placeholder="请输入"/>
            ,每人每日获得积分上限<el-input size="small" placeholder="请输入"/></el-checkbox>
          <el-checkbox v-model="checked">转发分享考证，每次获得积分<el-input size="small" placeholder="请输入"/>
            ,每人每日获得积分上限<el-input size="small" placeholder="请输入"/></el-checkbox>
          <el-checkbox v-model="checked">转发分享在线课程，每次获得积分<el-input size="small" placeholder="请输入"/>
            ,每人每日获得积分上限<el-input size="small" placeholder="请输入"/></el-checkbox>
          <el-checkbox v-model="checked">转发分享竞赛，每次获得积分<el-input size="small" placeholder="请输入"/>
            ,每人每日获得积分上限<el-input size="small" placeholder="请输入"/></el-checkbox>
        </div>
      </div></span>
      <span style="margin: 1% 0 1% 0;display: flex">积分使用：<div>支付时积分抵扣费用，1元=<el-input size="small" placeholder="请输入"/>
        ,满<el-input size="small" placeholder="请输入"/>可用</div></span>
      <div style=" width:50%;background-color: #9d9d9d;display: grid;margin-left: 5.5%;padding: 1% 0 1% 0">
        <span style="margin: 0 0 1.5% 1.5%">考证，每笔订单最高可使用<el-input size="small" placeholder="请输入"/>积分</span>
        <span style="margin: 0 0 1.5% 1.5%">名师直播，每笔订单最高可使用<el-input size="small" placeholder="请输入"/>积分</span>
        <span style="margin: 0 0 1.5% 1.5%">在线课程，每笔订单最高可使用<el-input size="small" placeholder="请输入"/>积分</span>
      </div>
      <div style="margin: 1% 0 1% 0">积分有效期：&nbsp;每年12月31日清零</div>
      <div style="margin: 0 0 1% 0">规则说明：&nbsp;向用户介绍这个功能</div>

      <WangEditor  v-model="editorContent"
                   :editorHeight="'400px'"
                   :config="editorConfig"
                   @ready="handleEditorReady"
                   style="width: 73%;margin-left: 5%"/>
    </div>
  </div>
</template>

<style scoped>
.el-input{
  width: 100px;
}
.el-checkbox{
  margin-bottom: 2%;
}
</style>
